<!-- 数量大于2 减少原因 下拉 -->
<template>
  <page-dialog
    :title="dialogInfo.title"
    v-model:visible="shows"
    :width="dialogInfo.width"
    :bt-loading="dialogInfo.btLoading"
    :bt-list="dialogInfo.btList"
    class="dialog-asset-card-split"
  >
    <page-form
      class="paddingBox order-model-formBox flex_wrap_start_start"
      v-model:ref-obj="assetCardSplitForm.ref"
      :data="assetCardSplitForm.data"
      :field-list="assetCardSplitForm.fieldList"
      :rules="assetCardSplitForm.rules"
      :label-width="assetCardSplitForm.labelWidth"
    >
      <template v-slot:form-qty>
        <div class="flex-row">
          <el-input-number
            controls-position="right"
            :min="2"
            :max="999"
            placeholder="请输入"
            v-model="assetCardSplitForm.data.qty"
            type="number"
            class="flex-input"
          >
          </el-input-number>
        </div>
      </template>
    </page-form>
    <p>
      注意：卡片拆分不支持卡片附属信息的拆分，请在拆分业务完成后在卡片中修改相关附属信息。
    </p>
  </page-dialog>
</template>

<script setup name="assetCardSplit">
const { proxy } = getCurrentInstance();
import { assetCardSplitCard, getCurrentFiscalPeriod } from "@/api/core.js";

const emits = defineEmits();
const props = defineProps({
  showDialog: {
    type: Boolean,
  },
  row: {
    type: Object,
  },
});

const assetCardSplitForm = ref({
  data: {},
  ref: "",
  fieldList: [
  {
      label: '业务日期',
      value: 'businessDate',
      type: 'date',
      labelTip: '',
      TimePickerOptions: {},
    },
    {
      label: "将卡片拆分为(张)",
      value: "qty",
      type: "slot",
    },
  ],
  rules: {
    qty: [{ required: true, message: "请输入", trigger: "blur" }],
    businessDate: [
      { required: true, message: '请选择业务日期', target: 'change' },
    ],
  },
  labelWidth: "140px",
});

let shows = computed({
  get() {
    return props.showDialog;
  },
  set(newValue) {
    emits("update:showDialog", newValue); // 更新父组件shows
  },
});

// 弹窗相关
const dialogInfo = ref({
  title: `卡片拆分设置[卡片编号${props.row.assetCode}]`,
  btLoading: false,
  width: "30%",
  btList: [
    {
      label: "关闭",
      event: handleClose,
      show: true,
    },
    {
      label: "保存",
      type: "primary",
      event: submitForm,
      show: true,
    },
  ],
});

function submitForm() {
  assetCardSplitForm.value.ref.validate((valid) => {
    if (valid) {
      const params = {
        assetId: props.row.id,
        qty: assetCardSplitForm.value.data.qty,
        businessDate: assetCardSplitForm.value.data.businessDate,

      };
      assetCardSplitCard(params).then((res) => {
        if (res.success) {
          proxy.$message.success({
            message: "操作成功",
          });
          emits("callback", params);
          handleClose();
        }
      });
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}
// 关闭弹窗前的回调
function handleClose() {
  shows.value = false;
  emits("reset");
}
function getFiscalPeriod() {
  getCurrentFiscalPeriod(2).then((res) => {
    if (res && res.success) {
      let index = assetCardSplitForm.value.fieldList.findIndex(
        (item) => item.value === 'businessDate'
      )
      let fiscalPeriodName = res.data.name
      if (index > -1) {
        assetCardSplitForm.value.fieldList[
          index
        ].labelTip = `当前会计期间：${fiscalPeriodName}`
        assetCardSplitForm.value.fieldList[index].TimePickerOptions = {
          disabledDate(time) {
            return (
              time.getTime() <
              new Date(res.data.startDate).getTime() - 24 * 60 * 60 * 1000
            )
          },
        }
      }
    }
  })
}
onMounted(() => {
  getFiscalPeriod()
});
</script>

<style scoped lang="scss">
.dialog-asset-card-split {
  .flex-row {
    display: flex;
    flex-direction: row;
    width: 300px;
  }
}
</style>
